<template>
  <div class="">
    <footer class="footer">
      <span class="todo-count" v-show="remainder"
        ><strong>{{ remainder }}</strong
        >剩余</span
      >
      <ul class="filters" v-show="allDone">
        <li>
          <a
            :class="{ selected: handoff === 'all' }"
            @click="switchover('all')"
            href="#/"
            >全部</a
          >
        </li>
        <li>
          <a
            :class="{ selected: handoff === 'active' }"
            @click="switchover('active')"
            href="#/active"
            >进行中</a
          >
        </li>
        <li>
          <a
            :class="{ selected: handoff === 'completed' }"
            @click="switchover('completed')"
            href="#/completed"
            >已完成</a
          >
        </li>
      </ul>
      <button class="clear-completed" @click="purge" v-show="remaining">
        清除已完成
      </button>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'ToFooter',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      handoff: 'all'
    }
  },
  methods: {
    purge () {
      this.$emit('purge')
    },
    switchover (data) {
      this.$emit('switchover', data)
      this.handoff = data
    }
  },
  computed: {
    remainder () {
      return this.list.filter(item => !item.checked).length
    },
    remaining () {
      return this.list.filter(item => item.checked).length
    },
    allDone () {
      return this.list.length
    }
  }
}
</script>
<style lang="less" scoped></style>
